<template>
  <div
    :class="{ expand: expanded, 'lc-palette-button-active': transforming }"
    class="lc-palette-button"
    @animationend="onMainAnimationEnd"
    @webkitAnimationEnd="onMainAnimationEnd"
    @mozAnimationEnd="onMainAnimationEnd"
    @click="onClick"
  >
    <div class="lc-sub-button-container">
      <slot/>
    </div>
    <div :style="mainButtonStyle" class="lc-main-button" @touchstart="toggle">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    offset: {
      type: Number, // 扇面偏移角，默认是四分之π，配合默认方向lt
      default: Math.PI / 4
    },
    direction: {
      type: String,
      default: 'lt' // lt t rt this.radius rb b lb l 取值有8个方向，左上、上、右上、右、右下、下、左下、左，默认为左上
    },
    radius: {
      type: Number,
      default: 90
    },
    mainButtonStyle: {
      type: String, // 应用到 lc-main-button 上的 class
      default: ''
    }
  },
  data: function() {
    return {
      transforming: false, // 是否正在执行动画
      expanded: false // 是否已经展开子按钮
    }
  },
  mounted() {
    if (this.$slots.default && this.$slots.default.length > 1) {
      this.slotChildren = []
      for (let i = 0; i < this.$slots.default.length; i++) {
        if (this.$slots.default[i].elm.nodeType !== 3) {
          this.slotChildren.push(this.$slots.default[i])
        }
      }
      let css = ''
      const direction_arc = Math.PI * (3 + Math.max(['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'].indexOf(this.direction), 0)) / 4
      for (let i = 0; i < this.slotChildren.length; i++) {
        var arc = (Math.PI - this.offset * 2) / (this.slotChildren.length - 1) * i + this.offset + direction_arc
        var x = (Math.cos(arc) * this.radius).toFixed(2)
        var y = (Math.sin(arc) * this.radius).toFixed(2)
        var item_css = '.expand .palette-button-' + this._uid + '-sub-' + i + '{transform:translate(' + x + 'px,' + y + 'px) rotate(720deg);transition-delay:' + 0.03 * i + 's}'
        css += item_css
        this.slotChildren[i].elm.className += (' palette-button-' + this._uid + '-sub-' + i)
      }
      this.styleNode = document.createElement('style')
      this.styleNode.type = 'text/css'
      this.styleNode.rel = 'stylesheet'
      this.styleNode.title = 'palette button style'
      this.styleNode.appendChild(document.createTextNode(css))
      document.getElementsByTagName('head')[0].appendChild(this.styleNode)
    }
  },
  destroyed() {
    if (this.styleNode) {
      this.styleNode.parentNode.removeChild(this.styleNode)
    }
  },
  methods: {
    toggle(event) {
      if (!this.transforming) {
        if (this.expanded) {
          this.collapse(event)
        } else {
          this.expand(event)
        }
      }
    },
    onMainAnimationEnd(event) {
      this.transforming = false
      this.$emit('expanded')
    },
    expand(event) {
      this.expanded = true
      this.transforming = true
      this.$emit('expand', event)
    },
    collapse(event) {
      this.expanded = false
      this.$emit('collapse', event)
    },
    onClick() {
      this.$emit('click')
    }
  }
}
</script>

<style>
  .lc-palette-button{
    display:inline-block;
    position:relative;
    border-radius:50%;
    width: 56px;
    height:56px;
    line-height:52px;
    text-align:center;
    transition:transform .1s ease-in-out;
  }
  .lc-main-button{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:50%;
    background-color:blue;
    font-size:2em;
  }
  .lc-palette-button-active{
    animation: lc-zoom 0.5s ease-in-out;
  }
  .lc-sub-button-container>*{
    position:absolute;
    top:15px;
    left:15px;
    width:25px;
    height:25px;
    transition: transform .3s ease-in-out;
  }
  @keyframes lc-zoom{
    0% {transform:scale(1)}
    10% {transform:scale(1.1)}
    30% {transform:scale(0.9)}
    50% {transform:scale(1.05)}
    70% {transform:scale(0.95)}
    90% {transform:scale(1.01)}
    100% {transform:scale(1)}
  }
</style>
